<template>
	<div class="error">
		<div class="error-flex">
			<div class="left">
				<div class="left-item">
					<div class="left-item-animation left-item-num">404</div>
					<div class="left-item-animation left-item-title">{{ $t('message.notFound.foundTitle') }}</div>
					<div class="left-item-animation left-item-msg">{{ $t('message.notFound.foundMsg') }}</div>
					<div class="left-item-animation left-item-btn">
						<el-button type="primary" round @click="onGoHome">返回首页</el-button>
					</div>
				</div>
			</div>
			<div class="right">
				<img :src="E404" />
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
import E404 from "@/assets/error/404.png"
import { useRouter } from 'vue-router';

const router = useRouter();
const onGoHome = () => {
	router.push('/');
};
</script>

<style lang="stylus" scoped>

.error 
	height 100%
	background-color var(--el-color-white)
	display flex
	.error-flex 
		margin auto
		display flex
		height 350px
		width 900px
		.left 
			flex 1
			height 100%
			align-items center
			display flex
			.left-item 
				.left-item-animation 
					opacity 0
					animation-name error-num
					animation-duration 0.5s
					animation-fill-mode forwards
				.left-item-num 
					color var(--el-color-info)
					font-size 55px
				.left-item-title 
					font-size 20px
					color var(--el-text-color-primary)
					margin 15px 0 5px 0
					animation-delay 0.1s
				.left-item-msg 
					color var(--el-text-color-secondary)
					font-size 12px
					margin-bottom 30px
					animation-delay 0.2s
				.left-item-btn 
					animation-delay 0.2s
		.right 
			flex 1
			opacity 0
			animation-name error-img
			animation-duration 2s
			animation-fill-mode forwards
			img 
				width 100%
				height 100%
</style>